<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab选项卡效果</title>
		
		<script src="../js/jquery-1.11.1.js"></script>
		        <style>
		            button.tb1{
		                position: relative;
		                margin-bottom: 0px;
						
		                width: 100px;
		                height: 50px;
		                text-align:  center;
		                line-height: 50px;
		                border: 0;
		                background-color: #e2e250;
		            }
		            #tb{
		                width: 100px;
		                height: 50px;
		                background-color: #aaaaaa;
		                text-align: center;
		                line-height: 50px;
		                border: 0;
		            }
		            #tab_wenzi{
						
		                position: absolute;
		                width: 500px;
		                height: 300px;
		                background-color: #e2e250;
		                text-align: center;
		                line-height: 300px;
		            }
		        </style>
	</head>
	<body>
		 
		 <div>
		<button class="tb1">tab01</button>
		<button id="tb" class="tb2">tab02</button>
		<button id="tb" class="tb3">tab03</button>
		        </div>
		        <div id="tab_wenzi">
		            <p>
		                tab文字内容一
		            </p>
		        </div>
		        <script>
		            $(".tb1").click(function(){
		                $(".tb1").css("background-color","#e2e250").css("background-color","#b6b6b6").parent().siblings().text("tab文字内容一");
		            });
		            $(".tb2").click(function(){
		                $(".tb2").css("background-color","#e2e250").css("background-color","#b6b6b6").parent().siblings().text("tab文字内容二");
		            });
		            $(".tb3").click(function(){
		                $(".tb3").css("background-color","#e2e250").css("background-color","#b6b6b6").parent().siblings().text("tab文字内容三");
		            });
		        </script>
	</body>
</html>